<template>
  <div>
    <el-dialog :title="curid?'修改':'添加'" :visible.sync="obj.isshow">
      <el-form :model="form">
        <el-form-item label="轮播图名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- 
            active-value: switch启用时的值
            inactive-value: switch禁用时的值
          -->
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canle">取 消</el-button>
        <el-button type="primary" v-if="curid == ''" @click="addBanner">添加</el-button>
        <el-button type="primary" v-else @click="updateBanner">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { successMsg, failedMsg } from "../../tools/tools.js";
import { banneradd ,bannerinfo,banneredit} from "../../request/api.js";
export default {
  props: ["obj"],
  data() {
    return {
      curid:'',
      form: {
        title: "",
        status: 1,
        img: "",
      },
      imageUrl: "",
      formLabelWidth: "120px",
    };
  },
  methods: {
    updateBanner(){
      let obj ={
        id:this.curid,
        ...this.form
      }
      banneredit(obj,true).then(d=>{
        if(d.data.code == 200){
          successMsg('修改成功')
          this.$emit('updateBanners')
          this.canle()
        }
      })
    },
    getOneBanner(id){
      this.curid = id
      console.log(id);
      bannerinfo({id}).then(d=>{
        if(d.data.code == 200){
          this.form =d.data.list
          this.imageUrl = 'http://localhost:3000'+this.form.img
        }
      })
    },
    canle(){
      this.form={
          title: "",
            status: 1,
            img: "",
      }
      this.imageUrl='',
      this.$emit('canle')
      this.curid=''
    },
    addBanner() {
      banneradd(this.form, true).then((d) => {
        if (d.data.code == 200) {
          successMsg('添加成功')
          this.$emit("addBanner");
          this.form = {
            title: "",
            status: 1,
            img: "",
          };
        }
      });
    },
    beforeAvatarUpload(file) {
      let { size, type } = file.raw;
      let typeArr = ["image/gif", "image/png", "image/jpg", "image/jpeg"];
      if (typeArr.indexOf(type) == -1) {
        failedMsg("只能上传.gif、.png、.jpg或.jpeg格式的图片");
        return false;
      }
      if (size > 2 * 1024 * 1024) {
        //文件大小不能超过2M
        failedMsg("文件大小不能超过2M");
        return false;
      }
      //将要上传的图片文件转换成图片路径并展示在界面上
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = file.raw;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>